{% extends 'common/panel.html' %}
{% load jsonify %}
{% block title %}Tradeoff Analysis Report{% endblock %}

{% block panel %}

<div>
<p>This table shows the scores determined for each objective, for the sites in your collection. 
</div>

<div>
<table class="tradeoff-table">
    <tr class="top-row">
        <td class="left-column">&nbsp;</td>
        {% for objective in objective_list %}
        <td>{{objective}}</td>
        {% endfor %}
    </tr>
    {% for site in sites %}
    <tr>
        <td class="site">{{site.name}}</td>
        {% for score in site.scores %}
        {% if site.conflict == 'true' and score > threshold %} 
        <td class="conflict">{{score}}</td>
        {% else %}
        {% if score > threshold %}
        <td class="non-conflict">{{score}}</td>
        {% else %}
        <td>{{score}}</td>
        {% endif %}
        {% endif %}
        {% endfor %}
    </tr>
    {% endfor %}
</table>
</div>

<div>
<p>
<div id="legend" style="margin-top: 20px;">
    <p><span class="conflict"><b>Orange</b></span> cells denote potential conflicts in which your site has relatively high scores for more than one objective.
    <p><span class="non-conflict"><b>Green</b></span> cells denote relatively high scores for sites where other objectives might be less suitable.
</div>
</div>


<style type="text/css">
span.conflict {
    background-color: #FEE8C8;
}

span.non-conflict {
    background-color: #C5D0C5;
}

table.tradeoff-table {
    font-size: 11px;
    width: 100%;
    border-collapse: collapse;
    font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}

table.tradeoff-table tr.top-row {
    text-align: center;
}

table.tradeoff-table td {
    border: 1px solid black;
    text-align: center;
}

table.tradeoff-table td.site {
    text-align: left;
    font-size: 12px;
    width: 28%;
}

table.tradeoff-table td.conflict {
    //background-color: #D0C5C5;
    background-color: #FEE8C8;
    font-weight: bold;
}

table.tradeoff-table td.non-conflict {
    background-color: #C5D0C5;
    font-weight: bold;
}

table.tradeoff-table tbody {
    background-color: white;
}

</style>
{% endblock %}